<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #eee;
    }
    .container {
      width: 320px;
      height: 180px;
      border-radius: 10px;
      overflow: hidden;
      position:relative;
    }
    .pic {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('https://z3.ax1x.com/2021/06/03/21lyND.jpg');
      background-size: cover;
      transition:all .3s;
    }

    h2 {
      position: absolute;
      top: 40%;
      left: 50%;
      max-width: 90%;
      transform: translate(-50%,-50%);
      color: #fff;
      transition: all .3s;
      font-style: italic;
      font-size: 20px;
    }

    .more-info {
      position:absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      font-size: 14px;
      margin: 0 auto;
      color: #fff;
    }
    
    .more-info .up-time {
      opacity: 0;
      transition: .3s;
    }
    .more-info .line {
      height: 2px;
      margin: 0 4px;
      background-color: rgba(255, 255, 255, .7);
      transition: .3s;
      opacity: 0;
    }
    .more-info .now-time {
      font-size: 12px;
      transition: .3s;
      opacity: 0;
    }
    .container:hover{
      cursor: pointer;
    }
    .container:hover .pic {
      transform: scale(1.3);
      filter: blur(2px);
    }
    .container:hover h2 {
      top: 30%;
    }
    .container:hover .more-info .up-time {
      transform: translateY(-40%);
      opacity: 1;
    } 
    .container:hover .more-info .line {
      transform: translateY(550%);
      opacity: 1;
    }
    .container:hover .more-info .now-time {
      transform: translateY(80%);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pic"></div>
    <h2>银翼杀手2049</h2>
    <div class="more-info">
      <div class="up-time">上映时间</div>
      <div class="line"></div>
      <div class="now-time">2021年6月3日12:57:15</div>
    </div>
  </div>
</body>
</html>